<template>
  <el-dialog
    :title="title"
    :visible.sync="dialogVisible"
    width="600px"
    @close="handleClose">
    <el-form label-width="80px" size="mini">
      <el-form-item label="数据key">
        <el-input v-model="form.dataKey"></el-input>
      </el-form-item>
      <el-form-item label="描述">
        <el-input v-model="form.remark"></el-input>
      </el-form-item>
      <el-form-item label="数据源">
        <data-source-btn :ds="form.dataSource" @change="handleDsEditChange"/>
      </el-form-item>
    </el-form>

    <span slot="footer" class="dialog-footer">
      <el-button type="primary" @click="handleSubmit">确 定</el-button>
      <el-button @click="handleClose">取 消</el-button>
    </span>
  </el-dialog>
</template>
<script>
  import DataSourceBtn from '../../../dataSource/button';
  import vpd from '../../mixins/vpd';

  export default {
    mixins: [vpd],
    components: {DataSourceBtn},
    props: {
      data: {
        type: Object
      }
    },
    data() {
      return {
        dialogVisible: true,
        form: {}
      }
    },
    computed: {
      title() {
        if (this.form.uuid) {
          return '修改全局数据源';
        }
        return '新增全局数据源';
      }
    },
    created() {
      this.form = Object.assign(this.form, this.data);
    },
    methods: {
      handleSubmit() {
        this.$vpd.commit('globalDataSource', this.form);
        this.$emit('close');
      },
      handleClose() {
        this.$emit('close');
      },
      handleDsEditChange(data) {
        this.$set(this.form, 'dataSource', data);
        // console.log('gb-ds', this.form);
      }
    }

  }
</script>
